“WP Circular Menu” Documentation by “AccessPress Themes” v1.0.0

---

“WP Circular Menu”

---

Table of Contents

1. Installing Instructions
2. Creating a Menu for WP Circular Menu
3. Configure WP Circular Menu
   1. Build Circular Menu
   2. Layout Settings
   3. Font and colors
   4. Display Settings
   5. Using Shortcodes
   6. Custom CSS

A) Installing Instructions - top

1. Unzip [plugin].zip
2. Upload all the files to the /wp-content/plugins/wp-circular-menu
3. Activate the plugin through the 'Plugins' menu in WordPress.
4. For customizing the plugin settings, click on WP Circular Menu option menu in WordPress left admin menu.

Once the plugin is installed and activated you will find a menu named "WP Circular Menu" in the left menu bar of the admin menu. Once you click on that menu, you will go to menu listing page. You can click on Add New. But before that lets create a menu first.

---

B) Creating a Menu for WP Circular Menu - top

You will need to need to configure a WordPress Menu before you can begin creating your circular menu. So,

• Go to Dashboard-> Appearance-> Menus.
• Click on Create a Menu, to create a new menu.
• Provide a menu name and click on Create Menu.
• Go to Screen Option on the top of the Menu Page and check WP Circular Menu under Boxes.
• Locate the WP Circular Menu Meta boxes, Check on Use as circular menu option if you want use the current menu as Circular menu.
• Select the Menu items you want to add to be menu and click on save menu. The menu supports 12 menu items except for template 9 which supports 8 menu item dues to design limitation. The plugin does not support sub-menus.
• You will see the WP Circular Menu icon on each Menu item, click on it to open a modular setting menu.
  

  Unlike a normal menu this menu allows you to add things like, an icon, background image, alter Tooltip text to your individual menu item.

  Menu Settings

  • Menu Icon

    Icon Type

    • Font Icons: Circular Menu Supports a wide range of font icons including Dashicons, Font Awesome, Genericons, Linear Icons and Themify icons. Click button to select a font icon. You can also directly add icon code such as dashicons|dashicons-admin-site or fa|fa-envelope-o or genericon|genericon-aside or lnr|lnr-home or ti|ti-home
    • Custom Icon: If icons are not a thing for you, you can upload your own icons images from the WordPress media library. Click button to upload media from media library or even directly place an image URL.

  • Menu Name

    • Hide/ Show Menu Name: In default, the circular menu will show the menu name label when you hover hover it. If you don't want this feature, check this option to hide showing of the menu name on hover.
    • Custom Name: If you want to alter the menu name text then simply add text here to overwrite the default menu name.

  • Notification Label

    Notification Text: Want to focus your viewers to a particular page? Have a hot sale going on your store? Circular menu allows to to added static Notification label to let people know what is going on with each particular link.

  • Background

    Image Background: Best suited for template 2 and not supported in template 3, 4 and 5, you can add background images in each of the menu list items.
• You will need to first save the menu after any menu item change to see the WP Circular Menu option in the newly added menu items.

Once you have created your menu items, let's create your first ever circular menu.

---

C) Configure WP Circular Menu - top

• Click on WP Circular Menu on the left admin panel.
• Click on add new.
• Enter title for your Circular menu.

You can configure the Circular menu in couple of steps, Let's begin with

---

1) Build Circular Menu - top

Select the assigned Circular Menu here and begin configuring your circular menu.

Check Creating a Menu for WP Circular Menu to learn how to create a Circular menu.

---

2) Layout Settings - top

• Select Template: Select any one of 9 prebuild ready to go templates. We offer 5 draggable templates and 4 fixed templates.
• Initial position: Only available for draggable templates. You can set the initial position of the menu on page load.
• Positions: Only available for fixed templates. Set a suitable fixed position for your menu to load on.
• Animation: Select open and close animation.
• Toggle Button:
  • Toggle Animation: Select a animation for toggle button
  • Customize? Check to customize the toggle button.
    • Icon colors: set open, close and hover color for the toggle bars.
    • Background: set open, close and hover color for toggle button background.
    • Border: set open, close and hover color and width for toggle button border.
• Menu item:
  • Customize? Check to customize the Menu items.
    • Icon colors: set icon color, active color and hover color for the menu icons.
    • Background: set icon color, active color and hover color for the menu icon background.
    • Border: set icon color, active color and hover color for the menu icon background. Option available only in template 2, 3, 6 and 9.
    • Center Image: set an image background in the menu center. Option available only in template 1, 4 and 8
    • Center color: set an background color in the menu center. Option available only in template 1, 4 and 8
• Notification label:
  • Choose template: Choose one of five template for your notification label.
  • Notificaition animation: Choose one of five animation for your notification label.
  • Customize? Check to customize the notification label.
    • Text colors: set text color for your notification label.
    • Background color: set background color for your notification label.
• Tooltip:
  • Customize? Check to customize the tooltip.
    • Text colors: set text color for your tooltip.
    • Background color: set background color for your tooltip.
• Typography:
  • Customize? Check to customize the typography.
    • Font family: select a font family.
    • Text transform: set top capitalize, lowercase or uppercase your tooltip and notification label.

---

5) Display Settings - top

You can set where to show or hide the Circular menu. These settings can be used to manage multiple menus in different pages. By default all menus are set to show in all pages. You can set where to show the menu and whom to show the menu to.

• Permission Settings: Set to show the menu to All users/ Logged in users or Logged out users.
• Hide Circular Menu in: Select the pages where you do not want to show this particular menu. The list should cover all the default WordPress Standard Pages and all the single pages of any custom post type. If you select the All Single Page option no menu will be shown in the single pages regardless of th particular page option below.

---

6) Using Shortcode - top

Begining from version 1.0.3, you can use shortcode to add any draggable template to your site. Here is how you can add a Circular menu via. Shortcode

• Go to Template Settings and configure the Keep open, Hide Toggle Button option.
• It is essential that you disable the Draggable property.
• Go to Display settings and turn on the Use as shotcode and hide everywhere else option.
• Go to the Extra option and turn of the responsive flat design.
• Copy the shortcode from Shortcode Information metabox and paste it to your desired place.

---

7) Custom CSS - top

Custom CSS section can be handy to provide CSS rules or modify any of the default settings or cover any settings that we might have missed in the Custom Settings.

Turn the style you have written on or off from Enable Custom CSS Section option.

---

Once again, thank you so much for purchasing this plugin. As we said at the beginning, we'd be glad to help you if you have any questions relating to this plugin. No guarantees, but we'll do our best to assist. If you have a more general question relating to the plugin on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

AccessPress Themes

Go To Table of Contents

---